<template>
	<div>
		<el-dialog :title="dialog.title" :visible.sync="dialogVisibleJiLiang" width="1025px" :before-close="hide">
			<div style="position:relative;">
				<div class="search">
					<input type="text" class="input" v-model="keywords" :placeholder="dialog.placeholder">
					<el-button type="primary" size="medium" @click="getList">搜索</el-button>
				</div>
				<el-tabs type="border-card">
					<el-tab-pane label="搜索结果">
						<el-button size="mini" @click="opaFun(true)" v-if="duoxuan">全选</el-button>
						<el-row :gutter="5" class="drugArr">
							<el-col :span="8" v-for="(item,index) in lists"><div class="drug" :class="{'active':item.checked}" @click="checkFun(item)" :title="item.name">{{item.name}}</div></el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="选中结果" v-if="duoxuan">
						<el-button size="mini" @click="opaFun(false)">全部取消</el-button>
						<el-row :gutter="5" class="drugArr">
							<el-col :span="8" v-for="(item,index) in lists" v-if="item.checked"><div class="drug" @click="checkFun(item)" :title="item.name">{{item.name}}</div></el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="sureFun">确 认</el-button>
				<el-button @click="dialogVisibleJiLiang = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props:{
			checkId:{
				type:String
			},
			ctype:{
				type:String
			},
			multi:{
				type:Boolean,
				default:false
			}
		},
		data () {
			return {
				dialogVisibleJiLiang:false,
				dialog:{
					title:"",
					placeholder:""
				},
				type:"",
				keywords:"",
				lists:[],
				typeName:"",
				checkedId:"",
				duoxuan:true
			}
		},
		watch:{
			ctype(val){
				if(!val){
					return;
				}
				this.typeName=val;
				this.typeChange();
			},
			checkId(val){
				if(!val){
					return;
				}
				this.checkedId=val;
				this.typeChange();
			},
			multi(val){
				this.duoxuan=val;
				this.typeChange();
			}
		},
		methods:{
			typeChange(){
				var type;
				this.lists=[];
				this.dialog={
					title:"",
					placeholder:""
				};
				this.type="";
				this.keywords="";
				switch (this.typeName){
					case '规则':
						type='gz';
						break;
					case '门诊科室':
						type='mzks';
						break;
					case '急诊科室':
						type='jzks';
						break;
					case '住院科室':
						type='zyks';
						break;
					case '医生':
						type='ys';
						break;
					case '诊断':
						type='zd';
						break;
					case '过敏源':
						type='gmy';
						break;
					case '手术':
						type='ss';
						break;
					case '检验':
						type='jy';
						break;
					case '给药途径':
						type='gytj';
						break;
					case "药品":
						type="yp";
						break;
					case "规则2":
						type="gz2";
						this.typeName="规则";
						break;
					case "抗菌药品":
						type="kjyp";
						this.typeName="抗菌药品";
						break;
					case "给药":
						type="gy";
						this.typeName="给药途径";
						break;
					case "疾病":
						type="jb";
						this.typeName="疾病";
						break;
				}
				this.type=type;
				this.dialog={
					title:this.typeName+"选择-"+(this.duoxuan?"复选":"单选"),
					placeholder:"请输入"+this.typeName
				};
				this.getList();
			},
			async getList(){
				let res;
				if(this.type=="gz"){
					res=await this.$custom.selectDosageList({
						keywords:this.keywords
					})
				}else if(this.type=="mzks"){
					res=await this.$custom.selectDeptList({
						keywords:this.keywords,
						mzks:1,
						zyks:0,
						jzks:0
					})
				}else if(this.type=="jzks"){
					res=await this.$custom.selectDeptList({
						keywords:this.keywords,
						mzks:0,
						zyks:0,
						jzks:1
					})
				}else if(this.type=="zyks"){
					res=await this.$custom.selectDeptList({
						keywords:this.keywords,
						mzks:0,
						zyks:1,
						jzks:0
					})
				}else if(this.type=="ys"){
					res=await this.$custom.selectDoctorList({
						keywords:this.keywords
					})
				}else if(this.type=="zd"){
					res=await this.$custom.selectDiseaseList({
						keywords:this.keywords
					})
				}else if(this.type=="gmy"){
					res=await this.$custom.selectAllergenList({
						keywords:this.keywords
					})
				}else if(this.type=="ss"){
					res=await this.$custom.selectOperationList({
						keywords:this.keywords
					})
				}else if(this.type=="jy"){
					res=await this.$custom.selectLabitemList({
						keywords:this.keywords
					})
				}else if(this.type=="gytj"){
					res=await this.$custom.selectRouteList({
						keywords:this.keywords
					})
				}else if(this.type=="yp" || this.type=="kjyp"){
					res=await this.$custom.listDrugMatch({
						keywords:this.keywords
					})
				}else if(this.type=="gz2"){
					res=await this.$custom.ivFreedom({
						keywords:this.keywords
					})
				}else if(this.type=="gy"){
					res=await this.$custom.listDrugrouteDrugroute({
						keywords:this.keywords
					})
				}else if(this.type=="jb"){
					res=await this.$custom.liverDamageList({
						keywords:this.keywords
					})
				}
				var checkId=this.checkedId.split(",");
				for(var i=0;i<res.length;i++){
					res[i].checked=false;
				}
				for(var j=0;j<checkId.length;j++){
					for(var i=0;i<res.length;i++){
						if(checkId[j] == res[i].code){
							res[i].checked=true;
							break;
						}
					}
				}
				this.lists=res;
			},
			hide () {
				this.dialogVisibleJiLiang = false;
			},
			show(){
				this.dialogVisibleJiLiang = true;
			},
			checkFun(item){
				if(this.duoxuan){
					item.checked=!item.checked
				}else{
					for(var i=0;i<this.lists.length;i++){
						this.lists[i].checked=false;
					}
					item.checked=true;
				}
				
			},
			opaFun(type){
				for(var i=0;i<this.lists.length;i++){
					this.lists[i].checked=type;
				}
			},
			sureFun(){
				var selectId=[],selectName=[];
				for(var i=0;i<this.lists.length;i++){
					if(this.lists[i].checked){
						selectId.push(this.lists[i].code)
						selectName.push(this.lists[i].name)
					}
				}
				this.hide();
				this.$emit("selectFun",selectId.join(","),selectName.join(","));
			}	
		}
	}
</script>

<style scoped lang="scss">
	.search{
		width:50%;
		height:40px;
		position:absolute;
		right:20px;
		top:2px;
		z-index:999;
		text-align:right;
		.input{
			width:200px;
			height:28px;
			line-height:28px;
			margin-right:10px;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			padding:0 15px;
			color:#606266;
		}
	}
	.drugArr{
		padding:15px;
		box-sizing: border-box;
		.drug{
			width:100%;
			height:22px;
			line-height:22px;
			margin-bottom:5px;
			padding-left:5px;
			cursor: pointer;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.drug.active{
			color:#fff;
			background:#409eff;
		}
	}
</style>